import React from 'react'
import classes from './Meal.module.css'
import Counter from '../../../UI/Counter/Counter'

function Meal(props) {
  return (
    <div className={classes.meal}>
        <div className={classes.imgBox}>
            <img src={props.meal.img} alt='hbb'/>
        </div>

        <div>
            <h2 className={classes.title}>{props.meal.title}</h2>
            <p className={classes.desc}>{props.meal.desc}</p>
            <div className={classes.priceAndCount} >
                <span className={classes.price}>{props.meal.price}</span>
                <Counter 
                    className={classes.count}
                    meal = {props.meal}
                    addMealHandler={props.addMealHandler}
                    subMealHandler={props.subMealHandler}
                />
            </div>
        </div>
    </div>
  )
}

export default Meal